<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Layui</title>
	<script src="/static/jquery-1.8.0.min.js"></script>
	<link rel="stylesheet" href="../css/layui.css" media="all">
</head>

<body>

	<form class="layui-form" action="">
		<div class="layui-form-item">
			<label class="layui-form-label">账单备注</label>
			<div class="layui-input-block">
				<input type="text" name="message" lay-verify="title" autocomplete="off" placeholder="账单详情"
					class="layui-input" id="message">
			</div>
		</div>
		<div class="layui-form-item" style="width: 100%">
			<label class="layui-form-label">付款人</label>
			<div class="layui-input-block">
				<select name="draweeName" id="draweeName">
					<option value="dhq">海权</option>
					<option value="toshi" selected="">toshi</option>
					<option value="lgh">贵豪</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">付款金额</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="amount" placeholder="￥" autocomplete="off" class="layui-input" id="amount"
						onchange="proportionChange()">
				</div>
			</div>
		</div>
		<div>
			<label class="layui-form-label">付款日期</label>
			<div class="layui-input-inline">
				<input type="text" name="payTime" id="payTime" class="layui-input" placeholder="yyyy-MM-dd HH:mm:ss">
			</div>
		</div>
		<hr>
		<div>
			<label style="font-size:18px;margin-left: 35px;margin-top: 20px;">分摊金额</label>
		</div>
		<div style="margin-top: 10px;">
			<div style="float:left">
				<label class="layui-form-label">海权</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" id="dhqMoney" name="dhqMoney" placeholder="￥" class="layui-input"
						oninput="value=value.replace(/[^\d.]/g,'')" disabled="disabled">
				</div>
			</div>
			<div>
				<label class="layui-form-label">比例%</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" id="dhqProportion" name="dhqProportion" class="layui-input"
						oninput="value=value.replace(/[^\d.]/g,'')" value="1" onchange="proportionChange()">
				</div>
			</div>
		</div>
		<div style="margin-top: 10px;">
			<div style="float:left">
				<label class="layui-form-label">toshi</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" id="toshiMenoy" name="toshiMenoy" placeholder="￥" class="layui-input"
						oninput="value=value.replace(/[^\d.]/g,'')" disabled="disabled">
				</div>
			</div>
			<div>
				<label class="layui-form-label">比例%</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" id="toshiProportion" name="toshiProportion" class="layui-input"
						oninput="value=value.replace(/[^\d.]/g,'')" value="1" onchange="proportionChange()">
				</div>
			</div>
		</div>
		<div style="margin-top: 10px;">
			<div style="float:left">
				<label class="layui-form-label">贵豪</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" id="lghMenoy" name="lghMenoy" placeholder="￥" class="layui-input"
						oninput="value=value.replace(/[^\d.]/g,'')" disabled="disabled">
				</div>
			</div>
			<div>
				<label class="layui-form-label">比例%</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" id="lghProportion" name="lghProportion" class="layui-input"
						oninput="value=value.replace(/[^\d.]/g,'')" value="1" onchange="proportionChange()">
				</div>
			</div>
		</div>
		<div class="layui-form-item" style="margin-top: 10px;">
			<div class="layui-input-block">
				<button type="submit" class="layui-btn" lay-submit="" lay-filter="submitContent">立即提交</button>
			</div>
		</div>
	</form>
	<script src="/static/html/js/tool.js"></script>
	<script src="../layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script>
		var id = getParams("id");
		var data;
		var name;
		$.ajax({
			type: 'get'
			, url: "/bills/" + id
			, contentType: "application/x-www-form-urlencoded"
			, dataType: 'json'
			, success: function (res) {
				data = res;
				var proportion = 0;
				for (var j = 0; j < 3; j++) {
					proportion += data.participants[j].proportion;
					data[data.participants[j].username] = data.participants[j].proportion;
				}
				$(function () {
					console.log(data)
					$('#message').val(data.message);
					$('#amount').val(data.amount);
					$('#dhqMoney').val((data.amount * data.dhq / proportion).toFixed(2));
					$('#lghMenoy').val((data.amount * data.lgh / proportion).toFixed(2));
					$('#toshiMenoy').val((data.amount * data.toshi / proportion).toFixed(2));
					$('#payTime').val(timestampToTime(data.payTime));
					$('#lghProportion').val(data.lgh);
					$('#dhqProportion').val(data.dhq);
					$('#toshiProportion').val(data.toshi);
					name = data.drawee;
					console.log(name);
					$('#draweeName').val(name);
				});
			}
		});

		layui.use(['form', 'layedit', 'laydate'], function () {
			var form = layui.form
				, layer = layui.layer
				, layedit = layui.layedit
				, laydate = layui.laydate;

			//日期
			laydate.render({
				elem: '#payTime'
				,type: 'datetime'
			});

			//监听提交
			form.on('submit(submitContent)', function (data) {
				console.log(data.field)
				var sendData = {};
				sendData["message"] = data.field.message;
				sendData["amount"] = data.field.amount;
				var timeStr = data.field.payTime.replace(/-/g, '/');
				sendData["payTime"] = new Date(timeStr).getTime();
				var participants = [
					{ "username": "lgh", "proportion": Number(data.field.lghProportion) },
					{ "username": "dhq", "proportion": Number(data.field.dhqProportion) },
					{ "username": "toshi", "proportion": Number(data.field.toshiProportion) }
				];
				sendData["participants"] = participants;
				$.ajax({
					type: 'put',
					url: "/bills/" + id,
					data: JSON.stringify(sendData),
					contentType: "application/json",
					success: function (res) {
						layer.msg('更新成功', { time: 1000 });
						setTimeout(function(){
							close();
							parent.location.href = "personalreceivablebills.html?name=" + name;
						},500);
					},
					dataType: "json"
				});
				return false;
			});


		});

		function close(){
			var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
			parent.layer.close(index); 
		}

		function proportionChange() {
			var amount = Number($('#amount').val());
			var proportion = Number($('#lghProportion').val()) + Number($('#dhqProportion').val()) + Number($('#toshiProportion').val());
			$('#lghMenoy').val(amount * Number($('#lghProportion').val()) / proportion);
			$('#dhqMoney').val(amount * Number($('#dhqProportion').val()) / proportion);
			$('#toshiMenoy').val(amount * Number($('#toshiProportion').val()) / proportion);
		}
	</script>

</body>

</html>